﻿@page "/components/divider"

<DocsPage>
    <DocsPageHeader Title="Divider" SubTitle="A divider is a thin line that groups content in lists and layouts."/>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="List Dividers">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="DividerListExample">
                <DividerListExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Inset Dividers">
                <Description>Adds a margin to the left side of the divider.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="DividerInsertExample">
                <DividerInsertExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Middle Dividers">
                <Description>Middle dividers have margin on both left and right side.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="DividerMiddleExample" ShowCode="false">
                <DividerMiddleExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Vertical Dividers">
                <Description>Vertical dividers can be used inside parents with a set height. If the parent doesn't have a set height but is displayed with flex, use the <CodeInline>Flexitem</CodeInline> property.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="DividerVerticalExample">
                <DividerVerticalExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
